<template>
  <div class="pb70">
    <div class="bannar">
      <swiper :options="swiperOption" ref="mySwiper">
        <swiper-slide>
          <div class="slider slider1"></div>
        </swiper-slide>
        <swiper-slide>
          <div class="slider slider2"></div>
        </swiper-slide>
        <swiper-slide>
          <div class="slider slider3"></div>
        </swiper-slide>
        <swiper-slide>
          <div class="slider slider4"></div>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
    <h1 class="test-tip">本网站正在处于测试阶段，暂时仅供内部工作人员使用</h1>
    <div class="container">
      <div class="index-service">
        <h2 class="index-title"><a href="javascript:void(0);" class="db">企业服务</a></h2>
        <div class="auto tc">
          <a href="#/transac-monitor-list" class="dib box bg-c-fff">
            <img src="../assets/sev1.png" alt="" class="db auto">
            <h3 class="tl">交易监控</h3>
            <p class="tl font-s-12">交易监控服务依托于信宝自主开发并投入运行的交易监控系统，分析交易相对方的资质，对交易合同进行审查修改，对交易中产生的证据进行实时分析和留存，根据交易合同及时给予用户交易建议，在线全程把控交易过程，实现交易风险识别与预警，最大限度的减少交易双方的违约意愿和风险，增加失信违约成本，切实守护用户的交易安全。</p>
          </a>
          <a href="#/lawyerlist" class="dib box bg-c-fff">
            <img src="../assets/sev2.png" alt="" class="db auto">
            <h3 class="tl">法律服务</h3>
            <p class="tl font-s-12"> 法律服务依托信宝遍布全国的信宝律师资源及自主开发并投入运行的服务监控系统，线上线下相融合，及时提供专业的、全面的、务实的法律及商务解决方案。信宝有专门团队进行全程监控，确保律师服务质量，及时制止律师任何损害用户利益的行为，切实守护用户的信任。</p>
          </a>
        </div>
      </div>
      <div class="index-news">
        <h2 class="index-title"><a href="javascript:void(0);" class="db">新闻资讯</a></h2>
        <div class="tab fix auto">
          <div class="flo-left tab-inner">
            <div class="rel cup db tab-con" v-for="(item,index) in newsList" v-show="newsIndex===index" @click="onNewDetail(item.id)">
              <img :src="item.image" alt="" class="db">
              <p class="abs">{{item.title}}</p>
            </div>
          </div>
          <ul class="flo-left tc bg-c-fff tab-title">
            <li v-for="(item,index) in newsList" v-bind:class="{ tabShow: newsIndex===index }" @click="tab(index)">{{item.title}}</li>
          </ul>
        </div>
      </div>
      <div class="index-partner">
        <h2 class="index-title"><a href="javascript:void(0);" class="db">合作机构</a></h2>
        <div class="fix auto box">
          <a href="#/about/parter?id=cjh" class="flo-left" v-bind:class="{ parshow: currentImg===1 }" @mouseenter="enter(1)">
            <img src="../assets/img_03.jpg" alt="">
          </a>
          <a href="#/about/parter?id=ffpt" class="flo-left" v-bind:class="{ parshow: currentImg===2 }" @mouseenter="enter(2)">
            <img src="../assets/img_05.jpg" alt="">
          </a>
          <a href="#/about/parter?id=jjb" class="flo-left " v-bind:class="{ parshow: currentImg===3}" @mouseenter="enter(3)">
            <img src="../assets/hzjg_03.jpg" alt="">
          </a>
          <a href="#/about/parter?id=bdkj" class="flo-left" v-bind:class="{ parshow: currentImg===4}" @mouseenter="enter(4)">
            <img src="../assets/img_07.jpg" alt="">
          </a>
          <a href="#/about/parter?id=fdc" class="flo-left" v-bind:class="{ parshow: currentImg===5 }" @mouseenter="enter(5)">
            <img src="../assets/img_09.jpg" alt="">
          </a>
        </div>
      </div>
    </div>
    <right-sidebar></right-sidebar>
  </div>
</template>
<script type="text/javascript">
import {
  swiper,
  swiperSlide
} from 'vue-awesome-swiper'
import RightSidebar from '../components/RightSidebar'

export default {
  components: {
    swiper,
    swiperSlide,
    RightSidebar
  },
  data() {
    return {
      swiperOption: {
        loop: true,
        effect: 'fade',
        pagination: '.swiper-pagination',
        paginationClickable: true
      },
      currentImg: 3,
      newsIndex: 0,
      newsList: []
    }
  },
  mounted() {
    var parms = {
      page: 1,
      rows: 6,
      type: 1
    }
    this.$http.get('/sysContent/list', {
      params: parms
    }).then(data => {
      if (data.data.httpCode === 200) {
        this.newsList = data.data.rows
        // console.log(this.newsList)
      } else {
        console.log(data.data.msg)
        this.$toasted.show(data.data.msg)
      }
    }).catch(err => {
      console.log(err)
    })
  },
  methods: {
    enter: function(n) {
      this.currentImg = n
    },
    tab(i) {
      this.newsIndex = i
    },
    onNewDetail(id) {
      this.$router.push('/news-text?id=' + id)
    }
  }
}

</script>
<style type="text/css" scoped>
.bannar {
  width: 100%;
  height: 500px;
}

.bannar .slider {
  background-position: center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  width: 100%;
  height: 500px;
}

.slider1 {
  background-image: url(../assets/ban.jpg);
}

.slider2 {
  background-image: url(../assets/ban1.jpg);
}

.slider3 {
  background-image: url(../assets/ban2.png);
}

.slider4 {
  background-image: url(../assets/ban3.png);
}

.index-title {
  line-height: 70px;
  margin: 27px 0;
  color: #01378c;
  font-size: 20px;
  font-weight: normal;
}

.index-title a {
  color: #01378c;
}

.index-service .box {
  padding: 48px 18px 21px 18px;
  width: 506px;
  height: 340px;
  color: #124494;
  margin: 0 40px;
  vertical-align: middle;
}

.index-service .box h3 {
  margin: 9px 0px 20px 0px;
}

.index-service .box p {
  line-height: 22px;
}

.index-news .tab {
  width: 1091px;
}

.index-news .tab .tab-con img {
  width: 810px;
  height: 300px;
}

.index-news .tab .tab-con p {
  padding: 0 20px;
  color: #fff;
  font-size: 22px;
  bottom: 0px;
  width: 100%;
  line-height: 40px;
  background: rgba(0, 0, 0, 0.3);
}

.index-news .tab .tab-title {
  width: 281px;
}

.index-news .tab .tab-title li {
  line-height: 50px;
  cursor: pointer;
  font-size: 18px;
}

.index-news .tab .tab-title li:hover,
.index-news .tab .tab-title li.tabShow {
  background-color: #01378c;
  color: #fff;
}

.index-partner .box {
  width: 1100px;
  height: 227px;
}

.index-partner .box a {
  margin: 53px 5px 0 5px;
  display: block;
}

.index-partner .box a img {
  width: 180px;
  height: 120px;
  display: block;
}

.index-partner .box a,
.index-partner .box a img {
  transition: all .5s;
}

.index-partner .box a.parshow {
  margin: 0px 0px 0 0px;
  box-shadow: 0px 0px 40px rgba(195, 206, 215, 1);
}

.index-partner .box a.parshow img {
  width: 340px;
  height: 227px;
}

</style>
<style>
.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: #b5d1ff;
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background: #ffffff;
}

.test-tip {
  margin: 20px 0;
  color: red;
  text-align: center;
}

</style>
